<template>
  <el-table :data="tableData" style="width: 70%">
    <el-table-column label="编号" width="90">
      <template #default="scope">
          <span>{{ scope.row.id }}</span>
      </template>
    </el-table-column>

    <el-table-column label="名称" width="180">
      <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
    </el-table-column>

    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script  setup>
import { ref,onMounted} from 'vue'
import {list} from '../../api/dept'

const tableData = ref([])


const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}

//当Vue组件加载时触发（钩子函数）
onMounted(async()=> {
    let x= await list()
    console.log(x.data)
    tableData.value=x.data
})

</script>